*{
    margin:0;
    padding:0;
}
body{
    background:#f9f7f8;
    padding-top:45px;
    padding-bottom:54px;
}
/*顶部导航*/
header{
    position:fixed;/*生成绝对定位，相对于浏览器窗口 */
    top:0;/* 相对于顶部距离为0 */
    width:100%;
    margin-bottom:5px;/* 相对于底部距离为0 */
    display:flex;
    background:whith;
    color:#000;
    height:40px;
    align-items:center;
}
/* .header-left{

} */
.headerleft{
    font-size:14px;
    margin:0 15px;/* 设置hearderleft的上边距，右边距，下边距，左边距 ,中间用空格隔开*/
}
.arrow{/* 设置向下的箭头 */
    display:inline-block;
    width:6px;
    height:6px;
    /* 左边斜45度，下边距斜45度，形成一个箭头 */
    border-left:1px solid #000;
    border-bottom:1px solid #000;
    transform:rotate(-45deg);
    /* 左边距和下边距 */
    margin-left:6px;
    margin-bottom:4px;

}
.headerright{
    flex:1px;/*完整是1 1 0%，即随着容器的放大而放大，缩小而缩小*/
    background:#f3f3f3;
    height:30px;
    border-radius:10px; /* 边框圆角，圆角半径为10 */
    padding:0 20px; /* 上填充为0，右填充为20px */
    margin-right:15px;
}
.headerright input{
    width:100%;
    height:100%;
    background:transparent;/* 设置不覆盖背景 */
    border:none; /* 设置没有边框 */
    outline:none;/* 取消单击时显示的边框 */
    font-size:14px;
}
/* 广告图 */
.Meituan{
    /* 设置外边距的距离 */
    /* margin-top:40px; */
    /* 写属性在一个声明中设置所有内边距属性 ,上下边距为5，左右边距为10*/
    padding:5px 10px;
    /* padding-top:40px; */
    background:#fff;
}
.Meituan img{
    width:100%;
    /* 给图片家阴影， */
    box-shadow:0 1px 2px rgba(0,0,0,0.2);
}
/* 导航菜单 */
.navlist{
    background:#fff;
    margin-bottom:10px;/*下边距为10px*/
}
.navlist ul{
    display:flex; /*弹性布局 */
    flex-wrap:wrap;/* 自动换行 */
    list-style:none;/* 设置列表项目样式为不使用项目符号 */
}
.navlist .nav-item{
    flex:0 0 20%; /* 不放大不缩小，占20%的宽度（设置一行五个） */
    text-align:center;/*设置字体居中  */
    padding:10px 0; /*设置每个item上面不要靠太边上*/
}
a{
    /* 规定添加到文本的修饰，下划线、上划线、删除线等,下面是设置文本没有以上的修饰 */
    text-decoration:none;
}
.nav-item .nav-icon{
    width:40px;
    height:40px;
    line-height:40px;
    border-radius:50%;
    margin:0 auto 7px;/* 上面边距设置为0 左右自动/圆形居中 下面为7 */
    color:#fff;
    font-size:25px;/* 使图标大一些，前面设置的是16,*/
}
.nav-item .nav-des{
    color:#333;
    font-size:14px;
}
/* 拼团 */
.pintuan{
    background:#fff;
    padding:10px;
}
.pintuan h4{
    color:#333;
    margin-bottom:10px;/* 下外边距为10 */

}
.box-list{
    display:flex;
    justify-content:space-between;
    /* 设置子项目在主轴上的对齐方式 */
}
.box-list .box-item{
    width:49%;
    text-align:center;
    /* 设置图片、图片下的标题、价格都居中 */
}
.box-item img{
    width:100%;
    border-radius:6px;
}
.box-item item-title{
    font-size:14px;
    white-space:nowrap;/* 设置标题文字不换行 */
    text-overflow:ellipsis;/* 文字超出的地方用....代替，配合下面一个属性才生效 */
    overflow:hidden;/* 溢出隐藏 */
}
.box-item .price .zhehouPrice{
    font-size:18px;
    color:#f63;
}
.box-item .price .yuanPrice{
    font-size:12px;
    color:#666;
    text-decoration:line-through;/* 删除线 */
}

/* 猜你喜欢 */
.youlike{
    margin-top:10px;
    background:#fff;
    padding:0 10px;
}
.youlike .title{
    text-align:center;
    padding:10px;
    font-size:25px;
    border-bottom:1px solid #ddd8ce;
    color:#6666;
}
/* .list{
    list-style:none;
     去掉ul 列表前面的点 
} */
.itemli .item-href{
    display:block;
    padding:10px 0;
    
}
.itemli .item-box{
    display:flex;
}
.itemli .item-img{
    width:200px;
    height:200px;
}
.itemli .item-des{
    flex:1;
    margin-left:10px;
}
.item-img img{
    /* 设置100%是为了继承父元素的宽和高 */
    width:100%;
    height:100%;
}
.item-des .des-name{
    font-size:18px;
    color:#333;
    margin-bottom:2px;
}
.item-des .des-title{
    font-size:15px;
    color:#666;
    margin-bottom:6px;
}
.item-des .des-price{
    font-size:14px;
    color:#666;
    position:relative;
}
.item-des .des-price .zhehouPrice{
    font-size:22px;
    color:red;
}
/* 在折后价前面加一个美元符号，通过伪类：before，可以理解为相当于zhehouPrice前面加一个div */
.item-des .des-price .zhehouPrice::before{
    content:'\A5';/* 设置div的内容为\A5,表示￥符号*/
    font-size:14px;
    color:#ff0000;
    margin-right:3px;
}
/* 已售尽采用绝对定位，定位在父元素的右侧，所以父元素要设置position:relative; */
.item-des .des-price .selNum{
    position:absolute;
    right:0;
    top:8px;/* 让其与门市价在同一行 */
}
.youlike .itemli{
    border-bottom:1px solid #ddd8ce;

}
/* 最后一个li不需要下面的边框 */
.youlike .itemli:last-child{
    border-bottom:none;
}

/* 底部 */
footer{
    position:fixed;/* 生成绝对定位的元素，相对于浏览器窗口进行定位。 */
    bottom:0px;
    width:100%;
    background:#fff;
}
footer .nav-menu{
    display:flex;/*弹性布局 */
    list-style:none;/* 设置列表项目样式为不使用项目符号 */
}
footer .nav-menu .nav-item{
    flex:1;/* 剩余空间自由缩放 */
    text-align:center;
    padding:8px 0;
}
.nav-item a{
    /* 设置块级元素 */
    display:block;
    color:#333;
}
.nav-item a.active{
    color:#f63;
}
/* 底部文字变小点 */
.nav-item span{
    font-size:14px;
}
/* 把图标字体调大一些，默认值16px */
.nav-item .iconfont{
    font-size:24px;
} 
